<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
    <#include "/lib/base_source.ftl">
      <style type="text/css">
      </style>
  </head> 
  <body>
    <div class='whole-container'>
      <#include "/lib/header.ftl">
        <div>
          <ul class="breadcrumb">
            <li>签到管理</li><span class="divider">/</span>
            <li>添加签到</li>
          </ul>
        </div>
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="container span12">
              <#include "/lib/alert.ftl">
                 <div class='main-content'>
                    <div class="well form-inline">
                        <div class='main-action'>
                        	<span>签到开始时间：${register.startTime?string('yyyy-MM-dd HH:mm:ss')}</span>
                    		<a class="btn btn-danger" href="javascript:stopRegister();">结束签到</a>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table table-striped table-bordered table-condensed" id="itemTable" style="font-size:12px;word-break:break-all;word-wrap:break-word;">
                            <thead>
                            <tr>
                                <th style="width:150px;width:150px">名字</th>
                                <th style="width:50px;width:75px;">赐名</th>
                                <th style="text-align:center;width:100px;">签到状态</th>
                                <th style="text-align:center;width:130px">首次出现时间</th>
                                <th style="text-align:center;">最后发言</th>
                                <th style="width:200px;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#if authList??>
                            <#list authList as item>
                            	<tr id="${item.id?c}">
                                	<td style="line-height:34px;">${item.name!}</td>
                                	<td style="line-height:34px;">${item.nickName!}</td>
                                	<td style="line-height:34px;text-align:center;" name="ss">
                                	</td>
                                	<td style="line-height:34px;" name="date"></td>
                                	<td style="line-height:34px;" name="txt"></td>
                                	<td style="line-height:34px;">
                                	<a class="btn btn-success btn-xs" href="javascript:qiandao('${item.id?c}','${register.id}','0');">签到</a>
                                	<a class="btn btn-warning btn-xs" href="javascript:qiandao('${item.id?c}','${register.id}','1');">迟到</a>
                                	<a class="btn btn-danger btn-xs" href="javascript:qiandao('${item.id?c}','${register.id}','-1');">未到</a>
                                	</td>
                                </tr>
                            </#list>
                            </#if>
                            </tbody>
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
    $(document).ready(function() {
    	getTalk();
	});
	function stopRegister(){
		location.href = "${rc.contextPath}/admin/register/stopRegister";
	}
	function qiandao(id,rid,s){
		$.ajax({
			url : "${rc.contextPath}/admin/register/register",
	    	dataType : "json",
	    	data :  {'status':s,'authId':id,'registerId':rid},
	    	type:'post',
	    	success:function(json){
	    		if (s == 0){
	    			$("#user"+id).find("td[name=ss]").html('<img src="${rc.contextPath}/images/qiandao_64.png" style="width:32px" />');
	    		} else if(s == 1){
	    			$("#user"+id).find("td[name=ss]").html('<img src="${rc.contextPath}/images/chidao_32.png" style="width:16px" />');
	    		} else if (s == -1)
	    			$("#user"+id).find("td[name=ss]").html('');
	    	}
		});
	}
	
	
	var trs = $("tr");
	var authIds = "";
	for ( var i = 1; i < trs.length; i++) {  
		authIds = authIds + ","+$(trs[i]).attr("id");
	}
	authIds = authIds.substring(1);
	
	function getTalk(){
		$.ajax({
			url : "${rc.contextPath}/admin/register/getAuthTalk",
	    	dataType : "json",
	    	data :  {'authIds':authIds},
	    	type:'post',
	    	success:function(json){
	    		var data = json.data;
	    		var trs = $("table tbody tr");
	    		for (var i=0;i<data.length;i++){
	    			var talk = data[i];
	    			var txt = talk.txt;
	    			var s = talk.status;
	    			var firstDate = showTime(talk.createTime);
	    			var tr = $("#"+talk.authId);
	    			tr.find("td[name=txt]").html(txt);
	    			tr.find("td[name=date]").html(firstDate);
		    		if (s == 0){
		    			tr.find("td[name=ss]").html('<img src="${rc.contextPath}/images/qiandao_64.png" style="width:32px" />');
		    		} else if(s == 1) {
		    			tr.find("td[name=ss]").html('<img src="${rc.contextPath}/images/chidao_32.png" style="width:16px" />');
		    		} else if (s == -1){
		    			tr.find("td[name=ss]").html('');
		    		}
	    		}
	    	}
		});
	}
	
	function showTime(time){
		if (time == null || time == ""){
			return "";
		}
		var year = time.year+1900;
		var month = time.month+1;
		var day = time.date;
		var hours = time.hours;
		var minutes = time.minutes;
		var seconds = time.seconds;
		return year+'-'+buling(month)+'-'+buling(day)+" "+buling(hours)+":"+buling(minutes)+":"+buling(seconds);
	}
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}
	
	setInterval("getTalk()",5000);
   </script>
</body>
</html>